import QtQuick 2.15

Item {
    property var theme: p_theme.currentTheme()
    width: parent.width
    height: 500
    GridView {
        id: gridView
        width: parent.width
        height: 400
        cellWidth: 40
        cellHeight: 40
        model: gridViewModel
        delegate: gridViewDelegate
    }

    ListModel {
        id: gridViewModel
    }
    Component {
        id: gridViewDelegate
        Rectangle {
            id: wrapper
            width: 35
            height: 35
            color: theme.backgroundColor
            Text {
                anchors.centerIn: parent
                color: theme.fontColor
                font.pointSize: 12
                text: num
            }
            GridView.onAdd: addAnimation.start()
            GridView.onRemove: delAnimation.start()

            SequentialAnimation {
                id: delAnimation
                PropertyAction {
                    target: wrapper
                    property: "GridView.delayRemove"
                    value: true
                }
                NumberAnimation {
                    target: wrapper
                    property: "scale"
                    duration: 200
                    easing.type: Easing.InOutQuad
                    from: 1
                    to: 0
                }
                PropertyAction {
                    target: wrapper
                    property: "GridView.delayRemove"
                    value: false
                }
            }

            NumberAnimation {
                id: addAnimation
                target: wrapper
                property: "scale"
                duration: 200
                easing.type: Easing.InOutQuad
                from: 0.2
                to: 1
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    gridViewModel.remove(index);
                }
            }
        }
    }
    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: gridView.bottom
        anchors.topMargin: 20
        width: parent.width * 0.6
        height: 40
        color: theme.backgroundColor
        radius: 10
        Text {
            anchors.centerIn: parent
            color: theme.fontColor
            font.pointSize: 14
            font.bold: true
            text: "ADD"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                gridViewModel.append({
                    "num": gridViewModel.count + 1
                });
            }
        }
    }
}
